<template>
  <div class="loyout">
    <nuxt />
    <!-- 回到顶部 -->
    <div class="backTop" v-if="isShowBackTop" @click="backTop">
      <div class="railway" ref="backTop"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      isShowBackTop: false,
    };
  },
  methods: {
    // 固定导航
    fixedNav() {
      if (document.documentElement.scrollTop > 0) {
        this.isShowBackTop = true;
      } else {
        this.isShowBackTop = false;
      }
    },
    // 返回顶部的动画
    srcollTop(number = 0, time) {
      if (!time) {
        document.body.scrollTop = document.documentElement.scrollTop = number;
        return number;
      }
      const spacingTime = 20;
      let spacingIndex = time / spacingTime; // 计算循环次数
      let nowTop = document.body.scrollTop + document.documentElement.scrollTop;
      let everTop = (number - nowTop) / spacingIndex; // 计算每次滑动的距离

      let scrollTimer = setInterval(() => {
        if (spacingIndex > 0) {
          spacingIndex--;
          this.$refs["backTop"].style.backgroundPosition = "-330px -5px";
          this.srcollTop((nowTop += everTop));
          if (Math.floor(spacingIndex) == 0) {
            clearInterval(scrollTimer);
            this.$refs["backTop"].style.backgroundPosition = "-40px -5px";
          }
        }
      }, spacingTime);
    },
    // 点击返回顶部的按钮
    backTop() {
      this.srcollTop(0, 300);
    },
  },
  mounted() {
    if (process.browser) {
      window.addEventListener("scroll", this.fixedNav);
    }
  },
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
// 小火箭返回顶部
.backTop {
  position: fixed;
  right: 80px;
  bottom: 0px;
  z-index: 99999;
  .railway {
    width: 90px;
    height: 200px;
    background: url("@/static/home/huojian.png") no-repeat center top;
    background-position: -30px -5px;
    // &:hover {
    //   // background-position: -177px -5px;
    // }
  }

  span {
    display: none;
    padding: 10px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    color: #5ccbba;
    background-color: rgba(0, 0, 0, 0.6);
  }
}
</style>
